<template>
  <div id="JobList">
    <search-bar/>
    <vj-list :load-more="loadMore.bind(this)">
      <template #default="{item:{name,businessName,id,address,maxsalary,minsalary}}">
        <ul @click="$pushRoute({path:'job-info',query:{customId:id}})" class="c-job">
          <li class="c-job__title">{{ name }}</li>
          <li>{{ businessName }}</li>
          <li>{{ address }}</li>
          <li class="c-job__num" v-if="minsalary&&maxsalary">{{ minsalary }}-{{ maxsalary }}</li>
        </ul>
      </template>
    </vj-list>
    <van-image class="a-btn" :src="require('@/assets/img/job-form.png')"/>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import SearchBar from "@/components/search-bar.vue";
import {asyncSleep} from "vijay-util";
import VjList from "@/components/vj-list.vue";
import {requestByGet} from "@/utils/request";

@Component({
  components: {VjList, SearchBar}
})
export default class JobList extends Vue implements ComponentOptions<Vue> {
  name = "JobList";

  async loadMore(pageNo, pageSize) {
    const {records} = await requestByGet(`/qqc/qqcPosts/yhList`, {pageNo, pageSize});
    return records;
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#JobList {
  padding-top: 55px;

  .c-job {
    font-size: 12px;
    line-height: 1.5;

    &__title {
      font-size: 17px;
      color: #181818;
      font-weight: 600;
    }

    &__num {
      font-size: 14px;
      color: #349e7e;
    }
  }

  .a-btn {
    position: fixed;
    right: 10px;
    bottom: 10px;
    @include rect(64px)
  }
}
</style>
